<template>
  <div class="goodsBox">
    <ul class="tabBox">
        <li class="font34" :class="{'on':currentTab == 0}" @click="tabChange(0)">点餐</li>
        <li class="font34" :class="{'on':currentTab == 1}" @click="tabChange(1)">评价</li>
        <van-popup>主要按钮</van-popup>
    </ul>
    <products v-show="currentTab==0" />
    <commentList v-show="currentTab==1" :reviewlist="reviewList" v-scroll="scrollEvent" class="pad40 commentList"/>
    <cartControl />
    <router-view/>


  </div>
</template>
<script>
import { Popup } from 'vant';
import products from '@/components/index/products'
import commentList from '@/components/detail/commentList'
import cartControl from '@/components/common/cartControl'
import {GetShopReviewList} from '@/api/comment'
//import {baseURL} from '@/api/config'
import { mapState } from 'vuex'

export default {
  name: 'productList',
  components: {
    products,
    commentList,
    cartControl,
    [Popup.name]: Popup
  },
  props: {
    msg: {
        type: String,
        default:'富苑餐饮'
    }
  },
  computed:{
    ...mapState({
      visible: (state) => state.visible,
      showDetail(state){ 
        return state.showDetail 
      }
    })
  },
  data(){
    return {
      pageIndex: 1,
      reviewList: [],
      currentTab: 0,
      loading: false
    }
  },
  created(){
    this.getShopReviewList()
  },
  methods:{
    scrollEvent(eve){
      //console.log(eve.srcElement.scrollHeight)
      if (eve.srcElement.scrollTop + eve.srcElement.offsetHeight > eve.srcElement.scrollHeight - 10 && !this.loading) {
        this.loading = true
        this.pageIndex++
        this.getShopReviewList()
      }
    },
    tabChange(tab){
        this.currentTab = tab

    },
    async getShopReviewList(){
      let param = {
        ShopId: this.$store.state.tableInfo.shopId,
        //ProductId: this.$route.query.id,
        State: 1,
        PageIndex: this.pageIndex,
        PageSize: 10
      }
      let { returnData = false }  = await GetShopReviewList(param)
      if(returnData == false) {
        this.loading = false
        return
      }
      this.reviewList.push(...returnData.data)
      /*this.reviewList.push(...[
        {"createDt": "string",
          "comment": "comment",
          "review": 1,
          "picList": `["${baseURL}/uploads/category/20211128/202111281857054853622.jfif","${baseURL}/uploads/category/20211128/202111281857054853622.jfif","${baseURL}/uploads/category/20211128/202111281857054853622.jfif"]`,
          "headImg": "string",
          "nickName": "string"
        },
        {"createDt": "string",
          "comment": "comment",
          "review": 1,
          "picList": `["${baseURL}/uploads/category/20211128/202111281857054853622.jfif","${baseURL}/uploads/category/20211128/202111281857054853622.jfif","${baseURL}/uploads/category/20211128/202111281857054853622.jfif"]`,
          "headImg": "string",
          "nickName": "string"
        },
        {"createDt": "string",
          "comment": "comment",
          "review": 1,
          "picList": `["${baseURL}/uploads/category/20211128/202111281857054853622.jfif","${baseURL}/uploads/category/20211128/202111281857054853622.jfif","${baseURL}/uploads/category/20211128/202111281857054853622.jfif"]`,
          "headImg": "string",
          "nickName": "string"
        },
        {"createDt": "string",
          "comment": "comment",
          "review": 1,
          "picList": `["${baseURL}/uploads/category/20211128/202111281857054853622.jfif","${baseURL}/uploads/category/20211128/202111281857054853622.jfif","${baseURL}/uploads/category/20211128/202111281857054853622.jfif"]`,
          "headImg": "string",
          "nickName": "string"
        },
        {"createDt": "string",
          "comment": "comment",
          "review": 1,
          "picList": `["${baseURL}/uploads/category/20211128/202111281857054853622.jfif","${baseURL}/uploads/category/20211128/202111281857054853622.jfif","${baseURL}/uploads/category/20211128/202111281857054853622.jfif"]`,
          "headImg": "string",
          "nickName": "string"
        },
        {"createDt": "string",
          "comment": "comment",
          "review": 1,
          "picList": `["${baseURL}/uploads/category/20211128/202111281857054853622.jfif","${baseURL}/uploads/category/20211128/202111281857054853622.jfif","${baseURL}/uploads/category/20211128/202111281857054853622.jfif"]`,
          "headImg": "string",
          "nickName": "string"
        },
        {"createDt": "string",
          "comment": "comment",
          "review": 1,
          "picList": `["${baseURL}/uploads/category/20211128/202111281857054853622.jfif","${baseURL}/uploads/category/20211128/202111281857054853622.jfif","${baseURL}/uploads/category/20211128/202111281857054853622.jfif"]`,
          "headImg": "string",
          "nickName": "string"
        },
        {"createDt": "string",
          "comment": "comment",
          "review": 1,
          "picList": `["${baseURL}/uploads/category/20211128/202111281857054853622.jfif","${baseURL}/uploads/category/20211128/202111281857054853622.jfif","${baseURL}/uploads/category/20211128/202111281857054853622.jfif"]`,
          "headImg": "string",
          "nickName": "string"
        },
        {"createDt": "string",
          "comment": "comment",
          "review": 1,
          "picList": `["${baseURL}/uploads/category/20211128/202111281857054853622.jfif","${baseURL}/uploads/category/20211128/202111281857054853622.jfif","${baseURL}/uploads/category/20211128/202111281857054853622.jfif"]`,
          "headImg": "string",
          "nickName": "string"
        },
        {"createDt": "string",
          "comment": "comment",
          "review": 1,
          "picList": `["${baseURL}/uploads/category/20211128/202111281857054853622.jfif","${baseURL}/uploads/category/20211128/202111281857054853622.jfif","${baseURL}/uploads/category/20211128/202111281857054853622.jfif"]`,
          "headImg": "string",
          "nickName": "string"
        }
      ])*/
      this.loading = false
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '@/assets/scss/index.scss';
  .goodsBox{
    position: absolute;
    top: 3.85rem;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0.5rem 0.5rem 0 0;
    overflow: hidden;
    .tabBox{
      display: flex;
      align-items: center;
      margin-left: 5.3%;
      margin-right: 0.5rem;
      li{ margin-right: 2rem; 
        line-height: 2.5;
        &.on{
          border-bottom: 2px solid #ffe16f;
        }
      }
    }
    .commentList{
      overflow-y: scroll;
      height: calc(100% - 2.2rem - 2.4% - 3.25rem);
    }
  }

</style>